<template>
    <el-card shadow="always" :body-style="{ padding: '20px' }"
    style="margin-top: 10px"
    >
        <div slot="header" class="header">
           <el-tabs v-model="activeName" class="demo-tabs"  >
            <el-tab-pane label="销售额" name="sale"></el-tab-pane>
            <el-tab-pane label="访问量" name="visite"></el-tab-pane>
           </el-tabs>
           <div class="right">
            <span>今日</span>
            <span>本周</span>
            <span>本月</span>
            <span>今年</span>
            <el-date-picker
            type="daterange"
            range-separator="-"
            start-placeholder="入住时间"
            end-placeholder="离开时间"
            size='small'
          />
           </div>
     
        </div>
     
    </el-card>
    
</template>

<script setup lang="ts">
    import {ref} from 'vue';
    // 收集选项卡的数据
    let activeName = ref('sale')

</script>

<style scoped>
    .header{
        position: relative;
    }
    .right{
        position: absolute;
        right: 0;
        top:10px
    }
    .right span{
        margin: 0 5px;
    }
</style>